<template>
  <div id="list">
    <div class="header">
      <van-icon class="header_back" name="arrow-left" @click='toKinds' />
      <van-search placeholder="请输入关键词" v-model="value" @search="onSearch" />
      <van-icon name="qr" class="checkout" v-on:click='changeDisplay' />
    </div>
    <div class="nav">
      <van-tabs v-model="active" @click="onClick">
        <van-tab title="综合"></van-tab>
        <van-tab title="销量"></van-tab>
        <van-tab title="价格"></van-tab>
        <van-tab title="筛选"></van-tab>
      </van-tabs>
      <van-cell-group v-show="isshow">
        <van-cell title="综合排序" :class='ifactive===1?"active":""' @click="byTotal"   />
        <van-cell title="评论由多到少" :class='ifactive===2?"active":""' @click="byComments" />
      </van-cell-group>
    </div>
    <transition name="slide-fade">
      <screen v-on:data='collect'></screen>
    </transition>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ul :class="display===2?'active':''">
          <li v-for="item in list" :key='item.commonId' v-on:click='todetail(item.commonId)'>
            <img :src="item.imageSrc" alt="" class="itemimg">
            <div class="item_box">
              <p class="title"><img src="https://api.10street.cn/wap/images/product/vipPrice0.png" alt="">{{ item.goodsName }}</p>
              <span class="oldprice">￥{{ item.appPrice0 }}</span>
              <p class="vipprice"><span>会员价<b>￥{{ item.vipPrice }}</b></span><img src="https://api.10street.cn/wap/images/collection.png" alt=""></p>
            </div>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import Vue from 'vue';
import axios from 'axios'
import { List,PullRefresh,Search , Icon , Tab, Tabs , Cell, CellGroup } from 'vant';
import screen from '@/screen.vue'

Vue.use(List);
Vue.use(PullRefresh);
Vue.use(Search);
Vue.use(Icon);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Cell);
Vue.use(CellGroup);

export default {
  data() {
    return {
      value:'',
      ifactive:1,
      isshow:false,
      active: 0,
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      page:1,
      sort:'',
      param : {
        client:'wap',
        page:this.page
      },
      lastactive:0,
      display:1
    };
  },
  methods: {
    todetail(commonId){
      this.$router.push({
        path:'/detail',
        query:{
          itemId:commonId
        }
      })
    },
    toKinds(){
      this.$router.push('/home/kinds')
    },
    onLoad() {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.param.cat = this.$route.query.cat
      this.param.keyword = this.$route.query.keyword
      this.value = this.param.keyword;
      this.param.sort = this.sort;
      axios({
        url:'/ajax/search',
        params:this.param
      })
      .then(data=>{
        let items = data.data.datas.goodsList;
        let finish = data.data.datas.pageEntity.hasMore;
        this.list=[
          ...this.list,...items
        ]
        this.page++;
        this.loading = false;
        if (!finish) {
          this.finished = true;
        }
      })
    },
    onRefresh() {
      this.finished = false;
      this.list=[];
      this.page=1;
      this.loading = true;
      this.onLoad();
    },
    onClick(index) {
      switch (index) {
        case 0:
          this.isshow = !this.isshow
          this.lastactive = this.active;
          break;
        case 1:
          this.sort='sale_des';
          this.ifactive=3;
          this.onRefresh();
          this.lastactive = this.active;
          break;
        case 2:
          if(this.sort === 'price_desc'){
            this.sort ='price_asc';
          }else{
            this.sort='price_desc';
          }
          this.ifactive=3;
          this.onRefresh();
          this.lastactive = this.active;
          break;
        case 3:
          this.$store.commit('screen/changeShow')
        default:
          break;
      }
    },
    byTotal(){
      this.ifactive = 1;
      this.isshow = !this.isshow;
      this.sort = '';
      this.onRefresh();
    },
    byComments(){
      this.ifactive = 2;
      this.isshow = !this.isshow;
      this.sort = 'comment_desc';
      this.onRefresh();
    },
    collect(data){
      this.active = this.lastactive;
      if(data){
        this.param = {
          ...this.param,
          ...data
        }
        this.onRefresh();
      }else{
        return false;
      }
    },
    onSearch(){
      this.page = 1;
      this.param = {
        client:'wap',
        page:this.page,
        keyword:this.value
      },
      this.$router.push('/list');
      this.onRefresh();
    },
    changeDisplay(){
      if(this.display === 1 ){
        this.display = 2
      }else{
        this.display = 1;   
      }
    }
  },
  components:{
    screen
  },
}
</script>
<style lang='stylus' scoped>
  #list
    .header
      position fixed
      z-index 999
      top 0
      background white
      display flex
      height 0.44rem
      width  100%
      padding-top 0.05rem
      .header_back
        font-size 0.2rem
        line-height 0.3rem
        margin-left 0.1rem
      .van-search
        height 0.285rem
        flex 1
        margin-top 0.04rem
      .checkout
        font-size 0.2rem
        margin-right 0.1rem
        margin-top 0.03rem
        line-height 0.3rem
    .nav
      position fixed
      top 0.44rem
      z-index 999
      width  100%
      .van-tabs
        opacity 0.9
        border-top 1px solid #F7F7F7
        border-bottom  1px solid #F7F7F7
        .van-tabs__wrap
          top 0.44rem
      .van-cell-group
        .active
          color red
    
    ul
      margin-top 0.90rem
      background #f5f5f5
      li
        height 1.05rem
        overflow hidden
        margin-bottom 0.1rem
        background #fff
        .itemimg
          float left
          width 1.05rem
          height 1.05rem
        .item_box
          padding 0.08rem
          padding-left 0.15rem
          display flex
          flex-direction column
          justify-content space-between
          .title
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-size 0.135rem
            img
              width 0.2rem
              height 0.17rem
          .oldprice
            font-size 0.12rem
            margin-top 0.05rem
          .vipprice
            display flex
            justify-content space-between
            span
              font-size 0.12rem
              b
                font-size 0.16rem
                color  rgb(250, 52, 43)
            img
              width 0.19rem
              height 0.19rem
      &.active
        display  flex
        flex-wrap wrap
        li
          width 50%
          height 2.88rem
          .itemimg
            width 100%
            height auto
            float none
          .item_box
            .title
              img
                width 0.2rem
                height 0.17rem
            .oldprice
            .vipprice
              span
                b
              img

    


</style>


